<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <ul class="select-ul" v-if="list.length">
        <li class="select-li-items" v-for="(item,index) in list" :key="index">
          <p class="class-name overflow-one">{{item.open_date}} {{item.class_time}}</p>
          <span class="selected-btn" :class="{on: item.is_leave == 1}" @click="changeSelect(index)">{{item.is_leave == 1 ? "已选择" : "选择"}}</span>
        </li>
        <li class="sure-select" @click="goBack">确定</li>
      </ul>
      <div v-else class="empty">
        <img src="/static/images/empty-icon.png" alt="空">
        <p class="empty-tips">暂无可选课次</p>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import Ls from '@/utils/storage'
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      goods_id: "", // 班级id
      sub_order_id: "", // 子订单id
      list: []
    }
  },
  onLoad(e) {
    console.log(e)
    this.goods_id = e.goods_id;
    this.sub_order_id = e.sub_order_id;
    this.getLeaveClassLesson();
  },
  methods: {
    // 获取列表
    getLeaveClassLesson() {
      wx.showNavigationBarLoading() //在标题栏中显示加载
      this.$fetch.getLeaveClassLesson({
        goods_id: this.goods_id,
        sub_order_id: this.sub_order_id,
        type: 1 // 类型（1、普通班课 2、艺体课）
      }).then(res=>{
        wx.hideNavigationBarLoading() //完成停止加载
        this.initLoading = false;
        let sureList = Ls.getItem("sureList")
        if(sureList){ // 如果缓存中有sureList 则使用缓存的list来渲染页面
          this.list = sureList;
          return
        }
        this.list = res.result.data;
      }).catch(err=>{
        console.log(err)
        wx.hideNavigationBarLoading() //完成停止加载
        wx.showToast({
          title: err.code_user_msg || err.code_msg,
          icon: 'none'
        })
      })
    },
    // 选择/取消选择
    changeSelect(index) {
      if(this.list[index].is_leave == '1') {
        this.list[index].is_leave = 2
      } else {
        this.list[index].is_leave = 1
      }
    },
    // 确定课次
    goBack() {
      Ls.setItem("sureList", this.list);
      wx.navigateBack({
        delta: 1
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  .sure-select{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    background:rgba(0,184,238,1);
    border-radius: 4px;
    margin: 15px auto;
    text-align: center;
  }
  .select-ul {
    width: 100%;
    padding: 18px 16px 70px 16px;
    box-sizing: border-box;

    .select-li-items {
      width: 100%;
      height: 50px;
      padding: 0 14px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 2px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
      color: #333;
      .class-name{
        flex-grow: 1;
        margin-right: 6px;
      }
      &.empty{
        height: 200px;
        justify-content: center;;
        align-items: center;
      }
      .title{
        font-size: 14px;
        color: #333;
        font-weight: 400;
        span{
          display: inline-block;
          font-size: 12px;
          color: #999;
          margin-top: 6px;
        }
      }
      .selected-btn{
        display: inline-block;
        width: 62px;
        min-width: 62px;
        line-height: 22px;
        border-radius: 10px;
        color: #fff;
        background: #00B8EE;
        text-align: center;
        font-size: 12px;
        transition: all .5s;
        &.on{
          color: #fff;
          background: #D6D6D6;
          transition: all .5s;
        }
      }
    }
  }
}
</style>
